

<template>
  <div class="post-container">
    <!-- 标题栏 -->
    <div class="header">
      <div class="header-content">
        <!-- <span class="back-icon">←</span> -->
        <h2 class="header-title">编辑文章</h2>
        <span class="next-step" @click="pub">提交</span>
      </div>
    </div>
    
    <!-- 内容区域 -->
	
    <div class="content">
      <!-- 标题输入 -->
	  <div class="texth">标题</div>
      <div class="input-section">
        <div class="input-group">
          <input v-model="pagedata.title"
            type="text" 
            placeholder="标题（建议30字以内）" 
            class="input-field"
          />
        </div>
       </div> 
	   <div class="texth">摘要</div>
	   <div class="input-section">
        <div class="input-group">
          <input v-model="pagedata.summary"
            type="text" 
            placeholder="摘要（建议30字以内）" 
            class="input-field"
          />
        </div>
       </div>
      
      <!-- 正文输入 -->
	  <div class="texth">正文</div>
      <div class="input-section">
        <div class="textarea-group">
          <textarea v-model="pagedata.content"
            placeholder="请输入正文" 
            class="textarea-field"
			maxlength="1000"
          ></textarea>
        </div>
      </div>
    </div>
	<div class="radio-group">
		<div class="text">选择类型</div>
		
	<!-- 	<radio-group @change="changeRadio($event)">
			<label class="radio">
				<radio value="6"  /><text>cpp</text>
			</label>
			<label class="radio">
				<radio value="12" /><text>历史</text>
			</label>
			<label class="radio">
				<radio value="13"/><text>English</text>
			</label>
			<label class="radio">
				<radio value="14"/><text>人工智能</text>
			</label>
		</radio-group> -->
		<radio-group @change="changeRadio($event)">
			<label class="radio" v-for="item in types" :key="item.id">
				<radio :value="item.id"/><text>{{item.categoryName}}</text>
			</label>
		</radio-group>
	</div>
	
  </div>
</template>

<script>
	import myrequest from "@/untils/request.js"
export default {
  data(){
	  return{
		  pagedata:{
			  title:"",
			  content:"",
			  createId:1,
			  summary:"",
			  categoryId:0,
			  status:  0,
			  id:""
		  },
		  types:[]
	  }
  },
  computed:{
	  checktype(){
		  return this.pagedata.categoryId 
	  },
	  getType(){
	  		  myrequest.getpageType(this.$store.state.token)
	  		  .then(r=>{
	  			  console.log(r);
	  			  this.types=r.data.data
	  		  })
	  }
  },
  methods:{
	  pub(){
		  if(!this.pagedata.title || !this.pagedata.content || !this.pagedata.summary ||!this.pagedata.categoryId){ //检查
			  uni.showToast({
			  	title:"请填写完整",
				mask:false,
				icon:"error"
			  })
			  return
		  }
		  uni.showLoading({
		  	mask:false
		  })
		  //更改 - id page
		  
		  myrequest.updatepage(this.$store.state.token,this.pagedata).then(r=>{

			  if(r.data.code === 0){
				  this.pagedata.categoryId = 0
				  this.pagedata.title = ""
				  this.pagedata.content = ""
				  this.pagedata.createId = this.$store.state.user.id
				  this.pagedata.summary = ""
				  this.pagedata.status = 0
				
				  uni.showToast({
				  	"title":"编辑完成，等待审核",
					complete() {
						setTimeout(()=>{
							uni.$emit("pagerefresh")
						},500)
					}
				  })
				  uni.hideLoading()
			  }else{
				  uni.showToast({
				  	"title":"网络原因，发布失败",
					icon:"error"
				  })
				  uni.hideLoading()
			  }
		  })
	  },
	  changeRadio(e){
		  this.pagedata.categoryId = e.detail.value
	  },
	  toaudithandle(option){
		console.log();
		  this.pagedata.title = option.obj.title
		  this.pagedata.content = option.obj.content
		  this.pagedata.createId = this.$store.state.user.id
		  this.pagedata.summary = option.obj.summary
		  this.pagedata.categoryId = option.obj.categoryId
		   this.pagedata.id = option.obj.id
	  }
  },
  onLoad() {
  	uni.$on("toaudit",this.toaudithandle)
  },
  onShow() {
  	// uni.$emit("auditok")
  },
  onUnload() {
  	uni.$off("toaudit")
  }
}
</script>



<style scoped>
/* 整体容器 */
.post-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.texth{
	padding: 5px;
	margin-bottom: 5px;
}

/* 状态栏 */
.status-bar {
  background-color: #ffffff;
  padding: 5px 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.status-content {
  font-size: 14px;
  color: #333333;
  text-align: center;
}

/* 标题栏 */
.header {
  background-color: #ffffff;
  padding: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}
.back-icon {
  font-size: 24px;
  color: #333;
  padding: 5px 10px;
}
.header-title {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin: 0;
}
.next-step {
  font-size: 16px;
  color: #1989fa;
  padding: 5px 10px;
}

/* 内容区域 */
.content {
  padding: 20px;
}

/* 图片上传区域 */
.image-upload-section {
  text-align: center;
  margin-bottom: 25px;
}
.upload-box {
  width: 150px;
  height: 90px;
  border: 1.5px dashed #cccccc;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
  background-color: #fafafa;
  transition: border-color 0.3s;
}
.upload-box:hover {
  border-color: #1989fa;
}
.plus-icon {
  font-size: 32px;
  color: #999999;
  font-weight: 200;
}
.upload-tip {
  font-size: 15px;
  color: #333333;
  margin-bottom: 6px;
}
.upload-size {
  font-size: 12px;
  color: #999999;
}

/* 输入区域 */
.input-section {
  margin-bottom: 20px;
}
.input-group, .textarea-group {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.input-group input, .textarea-group textarea{
	width: 90%;
	/* border: #333 solid 1px; */
}

.input-field {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  outline: none;
}
.textarea-field {
  width: 100%;
  height: 200px;
  padding: 16px;
  font-size: 15px;
  line-height: 1.5;
  border: none;
  border-radius: 10px;
  resize: none;
  outline: none;
}
.input-field::placeholder,
.textarea-field::placeholder {
  color: #bbbbbb;
}

.radio-group{
	padding: 10px 30px;
}
.radio-group label {
	margin-left: 10px;
}

.radio-group .text{
	margin-top: -10px;
	margin-bottom: 15px;
}

label.radio{
	display: inline-block;
	padding-top: 16px;
}
</style>